<template>
	<el-aside width="200px">
		<el-row class="tac">
		    <el-col >	
		      
				  <RouterLink to="/"><h5 class="mb-2" @click="selectMenu({name:'Index',title:'首页'})">Home</h5></RouterLink>
			  
		      <el-menu
		        :default-active="store.state.menus.editableTabsValue"
		        class="el-menu-vertical-demo"
		        @open="handleOpen"
		        @close="handleClose"
		      >
		        <el-sub-menu :index="menu.name" v-for="menu in menulist">
		          <template #title>
		            <el-icon v-html="menu.icon"></el-icon>
		            <span >{{menu.title}}</span>
		          </template>
				  
		         <el-menu-item-group v-for="m in menu.children">
					<router-link :to='m.path'>
						<el-menu-item :index="m.name" @click="selectMenu(m)">
							<el-icon v-html='m.icon'></el-icon>
							<span>{{m.title}}</span>
						</el-menu-item>
					</router-link>
		           
		          </el-menu-item-group>
		        </el-sub-menu>
		       <!-- <el-menu-item index="2">
		          <el-icon><setting /></el-icon>
		          <span>数据工具</span>
		        </el-menu-item> -->
		      </el-menu>
		    </el-col>
		 </el-row >
	</el-aside>
</template>

<script setup>
	import store from '@/store';
import {
	  Document,
	  Menu,
	  Location,
	  Setting,
	  User,
	  Rank,
	  Operation
	} from '@element-plus/icons-vue'
	import { reactive,computed } from 'vue';
	let menulist = computed(() => { 
		return store.state.menus.menulist
		
		
	});
	const selectMenu=(m)=>{
		store.commit('addtab',m)
		
	}
</script>

<style>
	a{
		text-decoration: none;
	}
</style>